﻿@{
    ViewBag.Title = "Login";
    Layout = null;
}

<link href="~/libs/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
<style>
    body {
        background-image: url('/images/logo/登录页背景图正大光明.png'); /* 替换为你的背景图URL */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 100vh;
        margin: 0;
    }

    .demo-login-container {
        width: 320px;
        margin: 21px auto 0;
        background-color: rgba(255, 255, 255, 0.8); /* 半透明背景 */
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .demo-login-other .layui-icon {
        position: relative;
        display: inline-block;
        margin: 0 2px;
        top: 2px;
        font-size: 26px;
    }

    .captcha-container {
        display: flex;
        align-items: center;
    }

    .captcha-question {
        margin-right: 10px;
        font-size: 16px;
    }

    .captcha-input {
        width: 100px !important; /* 调整输入框宽度 */
    }
</style>

<form class="layui-form">
    <div class="demo-login-container" style="margin-top: 260px;">
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-username"></i>
                </div>
                <input type="text" id="accountName" name="accountName" value="admin" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-password"></i>
                </div>
                <input type="password" id="accountPass" name="accountPass" value="123" lay-verify="required" placeholder="密码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="captcha-container">
                <span id="captchaQuestion" class="captcha-question"></span>
                <input type="text" id="captchaInput" name="captchaInput" lay-verify="required" placeholder="请输入答案" lay-reqtext="请填写答案" autocomplete="off" class="layui-input captcha-input">
                <button type="button" class="layui-btn layui-btn-xs" onclick="generateCaptcha()">换一题</button>
            </div>
        </div>

        <div class="layui-form-item">
            <button type="button" class="layui-btn layui-btn-fluid" lay-filter="demo-login" onclick="login()">登录</button>
        </div>
    </div>
</form>

<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="~/libs/layui-v2.5.6/layui/layui.js"></script>
<script src="~/libs/jquery/jquery.js"></script>

<script>
    let correctAnswer = 0;

    function generateCaptcha() {
        const num1 = Math.floor(Math.random() * 10) + 1;
        const num2 = Math.floor(Math.random() * 10) + 1;
        const operator = Math.random() > 0.5 ? '+' : '-';
        correctAnswer = operator === '+' ? num1 + num2 : num1 - num2;
        document.getElementById('captchaQuestion').innerText = `${num1} ${operator} ${num2} =`;
    }

    function login() {
        const inputAnswer = parseInt(document.getElementById('captchaInput').value, 10);
        if (isNaN(inputAnswer) || inputAnswer !== correctAnswer) {
            layer.msg('答案错误');
            generateCaptcha(); // 重新生成验证码
            return;
        }

        $.ajax({
            url: '/Account/Log',
            type: 'get',
            data: {
                 accountName: $("#accountName").val(),
                accountPass: $("#accountPass").val(),
                captcha: inputAnswer
            },
            dataType: 'json',
            success: function (res) {
                if (res != null) {
                    layer.msg('登录成功');
                    setTimeout(() => {
                        window.location.href = "/home/DynamicIndex?id=" + res.id;
                    }, 2000);
                } else {
                    layer.msg('登录失败，用户名或密码不正确');
                }
            }
        });
    }

    // 初始化验证码
    generateCaptcha();
</script>